<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的筛选条件DEMO</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <script src="element.js"></script>
    <style>
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background: #f9f9f9;}

        /*select*/
        .select{padding: 5px 10px;border:1px solid #ddd;border-radius: 4px;width: 30%;margin: 5% auto;font-size:12px;}
        .select li{list-style: none;padding: 10px 0px 5px 100px;}
        .select dl{position: relative;line-height: 24px;}
        .select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
        .select dt{width: 100px;margin-bottom: 5px;position: absolute;top:0;left:-100px;text-align: right;color:#666;height: 24px;line-height: 24px;}
        .select dd{float: left;display: inline;margin: 0 0 5px 5px;}
        .select dd a{display: inline-block;white-space: nowrap;height: 24px;padding: 0 10px;text-decoration: none;color: #039;border-radius: 2px;}
        .select dd a:hover{color:#F60;background-color: #f3edc2;}
        .select dd.selected a{color: #fff;background: #FF6600;}
        /* 已选条件 */
        .select-result dt{font-weight:bold}
        .select-no{color:#999}
        .select .select-result dd a{padding-right:20px;background:#f60 url("http://tmc-89146.oss-cn-hangzhou.aliyuncs.com/images/close.gif") right 9px no-repeat}
        .select .select-result dd a:hover{background-position:right -15px}
    </style>
</head>
<body>

<ul class="select" id="ul_select">
    <!-- 筛选列表 -->
    <li class="select-list">
        <dl id="select1">
            <dt>条件1：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">元素1</a></dd>
            <dd><a href="#">元素2</a></dd>
        </dl>
    </li>
    <li class="select-list">
        <dl id="select2">
            <dt>条件2：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">元素1</a></dd>
            <dd><a href="#">元素2</a></dd>
        </dl>
    </li>
    <!-- 已选条件 -->
    <li class="select-result">
        <dl id="dl_result">
            <dt>已选条件</dt>
            <dd class="select-no">暂时没有选择过滤条件</dd>
            <!--<dd><a href="#">已选</a></dd>-->
        </dl>
    </li>
</ul>

</body>
</html>